<script setup>
import emitter from "@/../eventBus";
import {ref} from "vue";

defineProps({
  todo: Object
})

/*
      * 在 vue3 中获取 ref
        1. ref获取单个dom元素, 直接使用 const html中ref的名字 = ref(null)

        2. ref获取 v-for 中的元素:
            <div ref='getDivDom' v-for="item in list" :data-id="item.id"></div>

            const divDomList = ref(new Map());
            const getDivDom = el=>{
                if(el){
                    divDomList.set(el.dataset['id'],el)
                }
            }

       3. 在swiper中获取swiper的dom元素:
          <swiper @swiper='getSwiper'></swiper >

          const swiperDom= ref(null);
          const getSwiper= el=>{
              swiperDom.value = el;
          }
 */
const inputTitle = ref(null);

const handleChecked = (itemId) => {
  emitter.emit('handleCheckedTableData', itemId)
}

const handleInput = (todo, value, enter) => {
  if (!value && enter) {
    return inputTitle.value.blur()
  }
  emitter.emit('handleEditData', {itemId: todo.id, itemValue: value})
}

const handleBlur = (todo, e) => {
  if (!e.target.value.trim()) return alert('输入不能为空')
  todo.isEdit = false
  emitter.emit('handleEditData', {itemId: todo.id, itemValue: e.target.value})
}

const handleEdit = (todo) => {
  todo.isEdit = true
}

const handleDelete = (itemId) => {
  if (confirm('确定是否删除?')) emitter.emit('handleDeleteData', itemId)
}

</script>

<template>
  <div class="todo-li">
    <li>
      <el-row :gutter="6">
        <label>
          <el-col :span="4">
            <input type="checkbox"
                   :checked="todo.done"
                   @change="handleChecked(todo.id)"/>
          </el-col>
          <el-col :span="12">
                            <span style="padding-left: 16px;"
                                  v-show="!todo.isEdit"
                            >{{todo.title}}</span>
            <el-input
                @input="handleInput(todo, $event)"
                v-show="todo.isEdit"
                v-model="todo.title"
                @blur="handleBlur(todo, $event)"
                @keyup.enter.native="handleInput(todo, null, true)"
                ref="inputTitle"
            ></el-input>
          </el-col>
        </label>
        <el-col :span="2">
          <el-button style="margin: 10px 10px 10px 0px;"
                     round
                     size="mini"
                     @click="handleEdit(todo)"
          >编辑
          </el-button>
        </el-col>
        <el-col :span="2">
          <el-button style="margin: 10px 10px 0px;"
                     round
                     size="mini"
                     @click="handleDelete(todo.id)"
          >删除
          </el-button>
        </el-col>

      </el-row>
    </li>
  </div>
</template>

<style scoped>
  .todo-li {
    list-style: none;
    margin: 15px 20px 5px 0px;
    height: 50px;
    border-bottom: 1px solid #cccccc;
    border-radius: 8px;
  }

  .todo-li li {
    line-height: 50px;
  }

  .todo-li .el-button {
    display: none;
  }

  .todo-li:hover .el-button {
    display: block;
  }

  .todo-li:hover {
    background-color: #cccccc;
  }
</style>
